import React, { useContext, useState, FunctionComponentElement } from "react";
import classNames from "classnames";
import Transition from "../Transition/transition";
import { MenuContext } from './menu';
import {MenuItemProps} from './menuItem';
import Icon from "../Icon/icon";

export interface SubMenuProps  {
      index?: string;
      title: string;
      className?:string;
}

const SubMenu:React.FC<SubMenuProps>  = (
      {index, title, className, children}
) => {
      const context = useContext(MenuContext);
      const openedSubMenus = context.defaultOpenSubMenu as Array<string>;
      const isOpend = (!!index && context.mode === 'vertical') ? openedSubMenus.includes(index) : false;
      const [menuOpen, setOpen] = useState(isOpend);
      const classes = classNames('menu-item submenu-item', className, {
             'is-active': context.index === index,
             'is-vertical': context.mode === 'vertical',
             'is-opened': menuOpen
      });
     

      const handleClick = (e: React.MouseEvent) => {
            console.log('title')
            e.preventDefault();
            setOpen(!menuOpen);
      };
      let timer: any;
      const handleMouse = (e: React.MouseEvent, toggle: boolean) => {
            clearTimeout(timer);
            e.preventDefault();
            timer = setTimeout(() => { 
                  setOpen(toggle)
            }, 300)
      };
      const clickEvents = context.mode === 'vertical' ? {
            onClick: handleClick
      } :  {};
      const hoverEvents = context.mode !== 'vertical'? {
            onMouseEnter: (e: React.MouseEvent) => {handleMouse(e, true)},
            onMouseLeave: (e: React.MouseEvent)   => {handleMouse(e, false)}
      } : {}

      const renderChildren = () => {
            const subMenuClasses = classNames('viking-submenu', {
                  'menu-opened': menuOpen
            })
            const childrenComponent = React.Children.map(children, (child, i) => {
                 const childElement = child as FunctionComponentElement<MenuItemProps>;
                 if(childElement.type.displayName === 'MenuItem') {
                       return React.cloneElement(childElement, {
                             index: `${index}-${i}`,
                       });
                 } else  {
                       console.error('children is error ')
                       return;
                 }
            });
            return (
                <Transition 
                    in={menuOpen} 
                    timeout={300} 
                    classNames="zoom-in-top" 
                    appear
                    unmountOnExit
                >
                  <ul className={subMenuClasses}>
                        {childrenComponent}
                  </ul>
                  </Transition>
            );
      }
      return (
            <li key={index} className={classes} {...hoverEvents}>
                  <div className="submenu-title" {...clickEvents}>
                        {title}
                        <Icon icon="angle-down" className="arrow-icon" />
                  </div>
                  {renderChildren()}
            </li>
      )
}
SubMenu.displayName = 'SubMenu';
export default SubMenu;